<template>
    <div class="main">
        <div class="city-list">
            <div class="header">
                <div class="left" @click="goback">
                    <!-- <van-icon name="arrow-left" /> -->
                    <i class="iconfont icon-xiangzuo"></i>
                    <!-- <i class="iconfont icon-tubiaoguifan2" style="font-size: 19px;"></i> -->
                </div>
                <div class="title" >当前城市-{{LCity | LCityfilter}}</div>
            </div>
            <div class="mint-indexlist city-index">
                <ul class="mint-indexlist-content" style="margin-right: 17px; height: 100%;">
                    <div class="recommend-city">
                        <div class="gprs-city">
                    <div class="city-index-title">
                        GPS定位你所在城市
                    </div>
                    <ul class="city-index-detail cleanfix">
                        <li v-for="(i,index) in this.LCity" :key="index" @click="backid(i.name,i.cityId)"  class="city-item-detail city-item-detail-gprs">
                            <div class="city-item-text"> 
                              <span >{{ i.name }}</span> </div>
                        </li>
                    </ul>
                        </div>
                        <div class="hot-city">
                            <div class="city-index-title">
                                热门城市
                            </div>
                            <ul class="city-index-detail cleanfix">
                                <li @click="backid(data.name,data.cityId)"  v-for="(data,index) in this.hotcities" :key="index" class="city-item-detail">
                                    <div class="city-item-text">
                                        {{data.name}}
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </ul>
            </div>
            <van-index-bar @click="scrollTo" :sticky="true" highlight-color="black" :index-list="indexList" @change="totast">
                <div v-for="(data,index) in citylist" :key="index">
                    <van-index-anchor class="citycolor" :index="data.Type" />
                    <van-cell @click="backid(item.name,item.cityId)" v-for="(item,index) in data.list" :key="index" :title="item.name" />
                </div>
            </van-index-bar>
        </div>
    </div>
</template>
<style scoped>
.icon-xiangzuo{
    color: #ccc !important;
}
.mint-indexlist {
    padding-top: 45px;
}
.city-list .search-city-input .cancel-btn {
    width: 43px;
    position: absolute;
    display: inline-block;
    text-align: right;
    font-size: 14px;
    line-height: 30px;
}
.van-icon-search {
    position: absolute;
    left: 7px;
    top: 0;
    line-height: 30px;
    font-size: 18px;
    color: #797d82;
}
.city-list, .city-list .header {
    background-color: #fff;
}
.city-list .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    z-index: 300;
}
.city-list .header .left {
    width: 14%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.city-list .header>div {
    float: left;
    height: 44px;
}
div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.city-list .header .title {
    width: 72%;
    text-align: center;
    font-size: 17px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #191a1b;
}
.city-list .header:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #ededed;
    color: #ededed;
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5);
}
.city-list .header .left>i {
    margin-left: 10px;
}
.city-list .header i {
    display: block;
    font-size: 23px;
    color: #191a1b;
}
.iconfont {
    font-family: iconfont!important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-tubiaoguifan2:before {
    content: "\e69b";
}
.main, body {
    height: 100%;
}

.city-list .search-city-input {
    z-index: 2000;
    height: 49px;
    width: 100vw;
    padding: 9.5px 15px;
    background-color: #f4f4f4;
    position: relative;
    /* top: 44px; */
}
.city-list .search-city-input .input-wrap {
    background-color: #fff;
    position: relative;
    display: inline-block;
    border-radius: 3px;
    width: 100%;
    height: 30px;
}
.city-list .search-city-input .input-wrap .search-icon {
    position: absolute;
    left: 7px;
    top: 0;
    line-height: 30px;
    font-size: 21px;
    color: #797d82;
}
.iconfont {
    font-family: iconfont!important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-sousuo-sousuofangdajing:before {
    content: "\e62f";
}
.city-list .search-city-input .input-wrap .search-input {
    position: absolute;
    left: 31.5px;
    top: 0;
    height: 30px;
    width: calc(100% - 65px);
    border: 0;
}
input, select, table, textarea {
    font: 12px/1.5 Tahoma,Helvetica,Arial,sans-serif;
    font-family: Microsoft YaHei,Tahoma,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    color: #2c3e50;
}
.city-list .search-city-input .input-wrap .clean-icon {
    position: absolute;
    right: 7px;
    top: 0;
    line-height: 30px;
    font-size: 21px;
    color: #bdc0c5;
}
.city-list .recommend-city {
    background-color: #fff;
    padding-left: 15px;
    padding-top: 15px;
}
.city-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.city-list .city-index .city-index-title {
    font-size: 13px;
    color: #797d82;
    margin-bottom: 10px;
}
.city-list .city-index .city-index-detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.city-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.city-list .city-index :nth-child(3n-2):after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #ededed;
    opacity: .4;
    color: #ededed;
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5);
}
.city-list ul:after, .city-list ul:before {
    content: "";
    display: table;
}
.city-list .city-item-detail {
    width: calc(33.33333vw - 11px);
    text-align: center;
    padding-bottom: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}
.city-list ul:after {
    clear: both;
}
.body {
    margin: 0;
    overflow-x: hidden;
    background-color: #f4f4f4;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.city-list .city-item-detail .city-item-text {
    height: 30px;
    background-color: #f4f4f4;
    line-height: 30px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 7.5px;
    font-size: 14px;
    color: #191a1b;
}
/* .city-list .city-index {
    padding-top: 94px;
} */
.mint-indexlist {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.city-list ul:after, .city-list ul:before {
    content: "";
    display: table;
}
.city-list .city-index .mint-indexlist-content {
    z-index: 3000;
    /* height: 100vh!important; */
}
.city-list .city-index .city-index-title {
    font-size: 13px;
    color: #797d82;
    margin-bottom: 10px;
}
.van-index-bar__sidebar{
    margin: 56px !important;
}
.van-index-bar__index{
    padding-top: 7px !important;
}
.van-index-bar__index {
    padding: 5px 3px 0 4px;
    font-weight: 500;
    font-size: 11px;
    line-height: 14px;
}
.van-index-bar .van-index-bar__sidebar{
  margin-top: 111px;
  top: 0
}
.citycolor{
  background-color: #f4f4f4;
}
.van-icon-clear{
    position: absolute;
    right: 3px;
    top: 0;
    line-height: 30px;
    font-size: 15px;
    color: #bdc0c5;
}
.van-index-anchor--sticky {
  background-color: #f4f4f4;
}
.citycolor{
  background-color: #f4f4f4;
}
.van-cell:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1.5px solid #ededed;
    color: #ededed;
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5);
}
</style>
<script>
// import getCurrentCityName  from '@/Util/getUserLocation'
import http from '@/Util/http'
import Vue from 'vue'
import BMap from 'BMap'
import { IndexBar, IndexAnchor, Cell, Toast, Search, Icon } from 'vant'
import BaiduMap from 'vue-baidu-map'
import { mapMutations } from 'vuex'
Vue.use(BaiduMap, {
  ak: '4iAFUNLYIc7bTGsGDc56Dw5LbKNRvxlB'
})
Vue.use(IndexBar).use(Cell).use(Toast)
Vue.use(IndexAnchor)
Vue.use(Icon).use(Search)
Vue.filter('LCityfilter', (el) => {
//  console.log(el)
 for (let i in el){
  //  console.log(el[i])
  return el[i].name
 }
})
export default {
//   components: { citybody },
  mounted () {
   
    this.toplogohide()
    this.topbarhide()
    this.buttomhide()
    // this.$store.commit('toplogohide')
    // this.$store.commit('topbarhide')
    // this.$store.commit('buttomhide')
    
    http({
      url: '/gateway?k=3887051',
      headers: {
        'X-Host': 'mall.film-ticket.city.list'
      },
      method: 'get'
    }).then(res => {
      this.citylist = this.Cityfilter(res.data.data.cities)
      this.originlist = res.data.data.cities
      this.hotcities = this.hotCityfilter(res.data.data.cities)
      new BMap.Geolocation().getCurrentPosition( ((position,res)=>{
          // this.LCity = position.address.city.replace('市','') // 获取城市信息
        this.LCity =  this.originlist.filter((item) => item.name===position.address.city.replace('市',''))
          // console.log(this.originlist)
        // const province = position.address.province // 获取省份信息
      // console.log(this.LCity);

      }))
    })
    // console.log(this.oldcitylist)
  },
  data () {
    return {
      value: '',
      hide: false,
      show: '',
      close: false,
      valuetext: '',
      citylist: [],
      hotcities:[],
      LCity: '',
      location:[],
      gpscity:[],
    }
  },
  methods: {
    ...mapMutations('Showhidebar',['toplogohide','topbarhide','buttomhide','toplogoshow','topbarshow','buttomshow']),
    ...mapMutations('City',['changecityname','changecityid']),
    hotCityfilter (hotcities) {
        const hotcity = hotcities.filter((item) => item.isHot>0)
        return hotcity
    },
    Cityfilter (cities) {
      const Type = []
      const City = []
      for (let code = 65; code < 91; code++) {
        Type.push(String.fromCharCode(code))
      }
      Type.forEach((el) => {
        const list = cities.filter((item) => item.pinyin.slice(0, 1).toUpperCase() === el)
        if (list.length > 0) {
          City.push({
            Type: el,
            list: list
          })
        }
      })
      return City
    }, 
      // geolocation
      // const geolocation = new BMap.Geolocation()
      // var _this = this
      // geolocation.getCurrentPosition(function getinfo (position) {
      //   const city = position.address.city // 获取城市信息
      //   // const province = position.address.province // 获取省份信息
      //   _this.LCity = city
      //   console.log( _this.LCity)
      // }, function (e) {
      //   _this.LCity = '定位失败'
      // }, { provider: 'baidu' })

    //    getCurrentCity() {
    //         getCurrentCityName().then((city) => {
    //           console.log(city);
    //         })
    //     },
    goback () {
      this.$router.push('/')
    },
    turnoff () {
      this.show = 'width: 100%'
      this.hide = false
    },
    off () {
      this.hide = true
      this.show = 'width: calc(100% - 43px);'
    },
    changeclose (el) {
      if (el.target.value.length > 0) {
        this.close = true
      } else {
        this.close = false
      }
    },
    onset () {
      this.valuetext = ''
      this.close = false
    },
   
    totast (index) {
    //  Toast('提示内容');
    },
    toast (index) {
     Toast('已定位到当前城市无需切换');
    },
    scrollTo (index) {
      console.log(index)
    },
    backid (name, id) {
      console.log(name, id)
      this.changecityname(name)
      this.changecityid(id)
      // this.$store.commit('changecityname', name)
      // this.$store.commit('changecityid', id)
      this.$router.back()
    }
  },
  computed: {
    indexList () {
      return this.citylist.map((item) => item.Type)
    },
    gps () {
      return this.citylist.list.filter((item=>item.name))
    },
  } ,
   beforeDestroy () {
    // this.$store.commit('toplogoshow')
    // this.$store.commit('topbarshow')
    // this.$store.commit('buttomshow')
    this.toplogoshow()
    this.topbarshow()
    this.buttomshow()
  },

}
</script>
